<template>
	<view class="feedback">
		<view class="feedback-box">
			<view class="feedback-item flex-verticality" style="border: none;">
				<view class="feedback-title">
					反馈人姓名
				</view>
				<input class="feedback-input" type="text" v-model="name" placeholder="请您输入姓名" />
			</view>
			<view class="feedback-item flex-verticality">
				<view class="feedback-title">
					电话
				</view>
				<input class="feedback-input" type="text" v-model="phone" placeholder="请输入电话号码" />
			</view>
		</view>
		<u-gap height="20"></u-gap>
		<view class="feedback-box">
			<view class="feedback-problem">
				<view class="problem-title">
					反馈问题
				</view>
				<u-input v-model="textarea.value" :type="textarea.type" :border="textarea.border"
					:height="textarea.height" :auto-height="textarea.autoHeight" placeholder="请您输入意见与反馈"
					border-color="#DCDCDC" maxlength="200" />
			</view>
		</view>
		<view class="feedback-btn">
			<u-button :custom-style="btnStyle" type="primary" @click="submit">立即反馈</u-button>
		</view>
		<!-- 提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				textarea: {
					value: '',
					type: 'textarea',
					border: true,
					height: 218,
					autoHeight: true,
				},
				btnStyle: {
					background: 'linear-gradient(-8deg, #2281FF 0%, #4E9AFD 100%)',
					color: '#FFFFFF',
					fontSize: '36rpx',
					height: '88rpx'
				},
				name: '',
				phone: ''
			}
		},
		onLoad() {
			that = this;
		},
		methods: {
			submit() {
				if (!this.name) {
					this.$refs.uToast.show({
						title: '请输入姓名',
						type: 'warning',
						icon: false
					})
					return
				}
				if (!this.phone) {
					this.$refs.uToast.show({
						title: '请输入电话号码',
						type: 'warning',
						icon: false
					})
					return
				}
				if (!this.$u.test.mobile(this.phone)) {
					this.$refs.uToast.show({
						title: '请输入正确的电话号码',
						type: 'warning',
						icon: false
					})
					return
				}
				if (!this.textarea.value) {
					this.$refs.uToast.show({
						title: '请输入需要反馈的问题',
						type: 'warning',
						icon: false
					})
					return
				}
				this.$u.post('/feedback/add', {
					name: this.name,
					phone: this.phone,
					content: this.textarea.value
				}).then(data => {
					that.$refs.uToast.show({
						title: '提交成功',
						type: 'success',
						icon: false
					})
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						})
					}, 500)
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
	}

	.feedback {
		padding: 40upx 30upx;

		.feedback-box {
			background: #FFFFFF;
			border-radius: 10upx;
			padding: 0 30upx;

			.feedback-item {
				padding: 40upx 0;
				border-top: 1upx solid #DCDCDC;

				.feedback-title {
					width: 180upx;
					font-size: 28upx;
					color: #333333;
				}

				.feedback-input {
					font-size: 28upx;
					color: #333333;
				}
			}

			.feedback-problem {
				padding: 40upx 0 32upx 0;

				.problem-title {
					font-size: 30upx;
					color: #333333;
					margin-bottom: 30upx;
				}
			}
		}

		.feedback-btn {
			padding: 58upx 30upx 0 30upx;
		}
	}
</style>
